<template>
	<view class="maintenance">
		<image class="logo-img" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/logo.png"
			mode="aspectFit"></image>
		<view class="title">{{params.detail.maintenanceTitle}}</view>
		<view class="reason">{{params.detail.maintenanceReason}}</view>
		<view class="btn" @click="params.getDetail('click')">
			<uni-load-more v-if="params.loading" iconType="snow" status="loading" />
			<span v-else>刷新</span>
			</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	onLoad(() => {
		params.getDetail()
	})
	let params = reactive<any>({
		detail: {},
		loading:true,
		getDetail: (type) => {
			params.loading = true
			uniCloud
				.callFunction({
					name: 'systemMaintenance'
				})
				.then((res) => {
					console.log("systemMaintenance", res.result)
					params.detail = res.result
					params.loading = false
					if(type == 'click'){
						//维护关闭后跳转到首页
						if(!params.detail.maintenance){
							uni.reLaunch({
								url:'/pages/home/index'
							})
						}
					}
				})
		}
	})
</script>

<style lang="scss" scoped>
	.maintenance {
		min-height: 100vh;
		background-color: #fff;
		text-align: center;

		.logo-img {
			width: 100rpx;
			height: 100rpx;
			display: block;
			margin: 0 auto;
			padding: 15vh 0 0;
		}

		.title {
			margin: 50rpx auto 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			padding: 0 10vw;
			box-sizing: border-box;
		}

		.reason {
			padding: 0 10vw;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #888;
		}

		.btn {
			margin-top: 50rpx;
			font-size: 28rpx;
			color: var(--color-primary);
		}
	}
</style>